import React from 'react';
import {Route} from 'react-router-dom'
import frame from '../../style/frame.less';
import defImg from "../../images/woshou.jpg";

class Describe extends React.Component {

    constructor(props) {
        super(props);
    }


    scrollNextPanel(){
        $('html,body').animate({
            "scrollTop" : $(window).height()
        }, 500);
    }

    render() {
        const {title, text, backgroundImg = defImg} = this.props;
        const style = {
            backgroundImage : "url('" + backgroundImg + "')"
        };
        return (
            <div className={`${frame.bgBanner} ${frame.bgCase}`} style={style}>
                <div className={frame.bannerCaption}>
                    <div className={frame.bgBannerContainer}>
                        <div className={frame.bannerCaptionText}>
                            <h3>{title}</h3>
                            <p>{text}</p>
                        </div>
                    </div>
                </div>
                <a onClick={this.scrollNextPanel} className={`${frame.bounceUpBtn} ${frame.bounceUpBtnAnimation}`}><i className="fa fa-angle-down fa-2x"/></a>
            </div>
        );
    }
}

export default Describe;
